
<template>
    <div class="cover-box">
        <div class="image-select" v-bind:style="cssStyle()">
            <div class="hd">
                {{config.title}}
                <div class="btns">
                    <i class="fa fa-times pull-right fa-2x close" title="关闭" v-on:click="close()"></i>
                </div>
            </div>
            <div class="bd">
                <div class="left-cats" v-bind:style="itemsHeight()">
                    <div class="mode">
                        <div class="" style="position: relative;">
                            <input type="text" class="" enter-submit="42" v-model="keyWord" placeholder="图片名">
                            <button class="" type="button" v-on:click="KeyWordSet(keyWord)">搜索</button>
                        </div>
                    </div>
                    <div class="cats">
                        <!--<div class="cat" v-for="cat in cats.data">
                            <span v-on:click="fnCatSet(cat)">{{cat.name}}</span>
                            <div class="subcat" v-for="subcat in cat.sub_cats">
                                <span v-on:click="fnCatSet(subcat)"> - {{subcat.name}}</span>
                            </div>
                        </div>-->
                        <nav-tree :value="params.catIds"
                                  :model="cats"
                                  class-name=""
                                  children="sub_cats"
                                  label-name="name"
                                  :value-name="'picture_category_id'"
                                  is-expanded="true"
                                  @selectID="select_id"
                        ></nav-tree>
                    </div>
                </div>
                <div class="allitems">
                    <div class="items" v-bind:style="itemsHeight()">
                        <div v-if="items.loading">
                            <i class="fa fa-spin fa-spinner"></i> 加载中...
                        </div>
                        <div v-if="items.total == 0"><span>暂无数据...</span></div>
                        <div class="item" v-for="item in items.list">
                            <a v-bind:href="item.picture_path" target="_blank" v-bind:title="item.title"><img v-bind:src="item.picture_path + '_150x150.jpg'"/></a>
                            <div>{{item.title}}</div>
                            <div>{{item.pixel}}</div>
                            <div><button v-bind:class="check(item.picture_path)? 'cancelbtn':'selectedbtn'"
                                         v-on:click="check(item.picture_path)? '':selected(item)" >{{check(item.picture_path)? '已选择' : '选择'}}</button></div>
                        </div>
                        <div style="clear:both"></div>
                        <div class="footer">
                            <pagination :total-items="items.total"
                                        :curr-page="params.pageNo"
                                        :size-page="params.pageSize"
                                        prev-show="2"
                                        next-show="2"
                                        @pageChange="pageChange" >
                            </pagination>
                        </div>
                    </div>

                </div>
            </div>
            <div class="ft">
                <button class="" v-on:click="save()">确定</button>
                <button class="cancelbtn" v-on:click="close()">取消</button>
            </div>
        </div>
    </div>
</template>


<script>
    import fn from 'admin/js/common/function.js';
    import navTree from 'admin/js/common/nav-tree.vue';
    import pagination from 'admin/js/common/pagination.vue';

    export default {
        data: function(){
            return {
                config: {
                    title: '请稍等...',
                    content: '',
                    style: {
                        left: 100,
                        top: 30,
                        width: 150,
                        height: 'auto'
                    },
                    customClass: ''	//自定义样式
                },
                params: {
                    keyWord: '',
                    catIds: 0,
                    pageNo: 1,
                    pageSize: 40
                },
                items: {
                    loading: true,
                    total : 0,
                    list : []
                },
                cats: [],
                height: 0,
                keyWord: '',
                item_img: ''
            }
        },
        /*computed: {
            // a computed getter
            config:  {
                get: function () {
                    var rs = {
                        title: '请稍等...',
                        content: '',
                        style: {
                            left: 100,
                            top: 30,
                            width: 150,
                            height: 'auto'
                        },
                        customClass: ''	//自定义样式
                    };
                    $.extend(true,rs, this.temp);
                    return rs;
                }
            }
        },*/
        methods: {
            close(){
                $('.cover-box').remove();
            },
            select_id(s_id,item){
                this.params.catIds = s_id;
                this.queryItems();
            },
            cssStyle(){
                return fn.makeStyle(this.config.style);
            },
            customClass(){
                return null;
            },
            itemsHeight(){
                //动态修正高度 600  480  360
                if($(window).height() <=650) {
                    return {height:'360px'};
                }

                if($(window).height() <=750) {
                    return {height:'480px'};
                }

                if($(window).height() > 750) {
                    return {height:'600px'};
                }

            },
            KeyWordSet(keyWord){
                this.params.keyWord = encodeURIComponent(keyWord);
                this.queryItems();
            },
            check(img_url){
                return this.item_img == img_url;
            },
            selected(img){
                this.item_img = img.picture_path;
            },
            delSelected(){
                this.select = '';
            },
            pageChange(i){
                var self = this;
                self.params.pageNo = i;
                $('.allitems .items').scrollTop(0);
            },
            save(){
                if(this.select != ''){
                    this.$emit("pic-change",this.item_img);
                }
                $('.cover-box').remove();
            },
            queryItems(){

                var self = this;
                self.items.loading = true;
                //取商品
                $.ajax({
                    type: 'POST',
                    url: CFG.api.top.getImages,
                    dataType: 'json',
                    data: this.params,
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.items.list = response.data.pictures ? response.data.pictures.picture : [];
                            self.items.total = response.data.totalResults;
                            self.items.loading = false;
                        }
                    }

                })
            }

        },
        watch: {
            'params.mode': function (newVal, oldVal) {
                this.params.keyWord =  '';
                this.params.catIds = 0;
                this.params.pageNo = 1;
                this.queryItems();
            },
            /*'params.keyWord': function (newVal, oldVal) {
                this.params.pageNo = 1;
                this.queryItems();
            },*/
            'params.catIds': function (newVal, oldVal) {
                this.params.pageNo = 1;
                this.queryItems();
            },
            'params.pageNo': function (newVal, oldVal) {
                this.queryItems();
            }
        },
        created (){
            var self = this;
            //this.$data = _.assignIn(this.$data, this.$props.config);
            //$.extend(true,self.$data, self.temp);

            //取分类
            $.ajax({
                type: 'POST',
                url: CFG.api.top.getImageCats,
                dataType: 'json',
                data: {},
                error: function (error) {
                    //alert(JSON.stringify(error));
                },
                success: function (response) {
                    if (response.err) {
                        //alert(response.err.msg);
                        //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                        //fn.tx(response);
                    } else {
                        self.cats = [{
                            picture_category_id: 0,
                            name: '所有图片',
                            sub_cats: response.data
                        }];
                    }
                }

            })


            //动态修正高度
            if($(window).height() <= 650) {
                this.params.pageSize = 40;
            }

            if($(window).height() <= 750) {
                this.params.pageSize = 40;
            }

            if($(window).height() > 750) {
                this.params.pageSize = 40;
            }

            this.queryItems();
            this.$nextTick(function(){
                $.extend(true,self.$data, self.temp);
            })

        },
        /*beforeUpdate(){
            $.extend(true,this.$data, this.temp);
            //this._get_left();
        },*/
        components: {
            navTree: navTree,
            pagination: pagination
        }
    }
</script>

<style lang="less">
    .cover-box {
        position: fixed;
        width:100%;
        height: 100%;
        z-index: 200;
        background-color: rgba(0,0,0,0.5);

        .image-select {
            top: 10px;
            _position: absolute;
            min-height: 50px;
            _height: 50px;
            opacity: 0.9;
            background-color: #ccc;
            border-radius: 4px;
            margin: 30px auto;

            input {
                width: 100px;
            }

            .hd {
                display: flex;
                justify-content:  space-between;
                height:30px;
                line-height: 30px;
                vertical-align: middle;
                padding:0 5px;
                border-bottom: 1px solid #242424;
                border-bottom: 1px solid rgba(0, 0, 0, 0.4);
            }

            .bd {
                display: flex;
                padding: 5px;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
                min-height: 30px;
                max-height: 670px !important;

                .active {
                    border-color: #C75510;
                }

                .left-cats {
                    padding: 5px;
                    width: 30%;
                    height: 100%;

                    .mode {
                        .input-group {
                            input {
                                height: 24px;
                            }

                        }
                    }

                    .cats {
                        width: 100%;
                        height: 90%;
                        overflow: auto;
                        padding-top: 20px;

                        .cat,
                        .subcat {

                            span {
                                cursor: pointer;
                                &:hover {
                                    background-color: #999;
                                }

                            }

                        }

                    }
                }

                .allitems {
                    width: 80%;
                    height: 100%;

                    .items {
                        height: 87%;
                        overflow: auto;

                        .item {
                            display: block;
                            width: 152px;
                            height: 222px;
                            overflow: hidden;
                            text-align: center;
                            margin-right: 5px;
                            float: left;

                            a {
                                width: 150px;
                                height: 150px;
                                overflow: hidden;
                                border: 1px solid #ddd;
                                border-radius: 4px;
                                text-align: center;
                                vertical-align: middle;
                                display: table-cell;
                            }

                            div {
                                white-space: nowrap;
                            }

                        }
                    }

                }

            }

            .ft {
                vertical-align: middle;
                padding: 2px 5px;
                text-align: center;
                border-top: 1px solid #242424;
                border-top: 1px solid rgba(0, 0, 0, 0.4);
            }

        }
    }

</style>
